<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=2.0 user-scalable=yes"/>
    <title>我的主页</title>
    <link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/dataTables.bootstrap.css">

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #page {
            width: 100%;
            padding: 0 10px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
<div id="page">


    <div>
        <form id="frm-search">
            <label>请输入跳转页数：</label>
            <input type="number" name="pageNum" style="width: 100px;height: 30px;line-height: 30px;">
            <input id="btn-search" type="button" value="提交" style="width: 50px;height: 30px;line-height: 30px;">
            <input type="reset" value="取消" style="width: 50px;height: 30px;line-height: 30px;">
        </form>
    </div>

    <div class="table-responsive">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        </table>
    </div>


</div>
</body>
<script type="text/javascript" src="datatables/js/jquery.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#example').dataTable({
            ajax: {
                url: 'datatables',
                type: 'get',
                data: function (data) {
                    console.log(data);
                    $.each(data.columns, function (i, c) {
                        c.searchValue = c.search['value'];
                        c.searchRegex = c.search['regex'];
                        delete(c.search);
                    });
                }
            },
            columns: [
                {data: 'id', title: 'id'},
                {data: 'name', title: 'name'},
                {data: 'age', title: 'age'}
            ],
            processing: false,
            serverSide: true,
            stateSave: true,
            paging: true,
            pagingType: 'full_numbers',
            autoWidth: true,
            lengthChange: true,
            ordering: true,
            scrollX: true,
            searching: true,
            destory: false,
            displayStart: 0,
            dom: '<"top"f>rt<"bottom"ip><"clear">',
            pageLength: 10,
            language: {
                sProcessing: '处理中...',
                sLengthMenu: '_MENU_ 条记录每页',
                sZeroRecords: '没有匹配结果',
                sInfo: '第 _PAGE_ 页 ( 总共 _PAGES_ 页 / _TOTAL_ 条 )',
                sInfoEmpty: '无记录',
                sInfoFiltered: '',
                sInfoPostFix: '',
                sSearch: '搜索：',
                sUrl: '',
                sEmptyTable: '表中数据为空',
                sLoadingRecords: '载入中...',
                sInfoThousands: ',',
                oPaginate: {
                    sFirst: '首页',
                    sPrevious: '上一页',
                    sNext: '下一页',
                    sLast: '尾页'
                },
                oAria: {
                    sSortAscending: ': 以升序排列此列',
                    sSortDescending: ': 以降序排列此列'
                }
            },
            fnServerParams: function (aoData) {
                aoData.pageNum = $('input[name="pageNum"]').val();
            }
        });


        $('#btn-search').click(function () {
            var pageNum = $('input[name="pageNum"]').val();
            table.fnPageChange(Number(pageNum) - 1);
        });
    });

</script>
</html>